<template>
    <div class="carousel_box" @mouseover="m_hover" @mouseout="m_out">
        <!--        左箭头-->
        <div class="carousel_box_but" :class="{'display':display}" @click="next(true,null)">
            <img src="/public/img/home/arrow_left.png" alt="">
        </div>

        <!--        内容显示-->
        <div class="carousel_show">
            <div class="carousel_content">
                <img :src="img.imgList[index_img].img" alt=""
                     @mousemove="imgSize=true" @mouseout="imgSize=false"
                     :key="index_img"
                     @click="toDetail(img.imgList[index_img].path)"
                     :title="img.imgList[index_img].msg+'-点击浏览'"
                     class="carousel_img" :class="{'imgSize':imgSize}">
            </div>
        </div>
        <!--         小圆点-->
        <ul class="carousel_box_dot" @mousemove="imgSize=true">
            <li v-for="(item,index) in img.imgList" :key="index"
                :class="{'choose':index_img===index}"
                @click="next(false,index)"></li>
        </ul>
        <!--        右箭头-->
        <div class="carousel_box_but right_but" :class="{'display':display}" @click="next(false,null)">
            <img src="/public/img/home/arrow_left.png" alt="">
        </div>
    </div>
</template>

<!--轮播图组件-->
<script setup>
import {onMounted, onBeforeMount, ref, onBeforeUnmount} from "vue";
//收到的图片列表
const img = defineProps({
    imgList: Array
})
const index_img = ref(0); //指定当前是第几图片
const display = ref(false); //判断鼠标是否在轮播图中
const nextTimer = ref(null); //自动轮播定时器
const imgSize = ref(false); // 图片缩放

//点击前往
const toDetail = (path)=>{
    // 如果有则说明次连接是一个外部链接
    if(!path.indexOf("http://") || !path.indexOf("https://")){
        window.open("https://blog.lyzhnb.top/#/", '_blank');
        return 0;
    }
    window.open("#/articleDetails?id=" + path, '_blank');

}

//页面加载执行方法
onMounted(() => {
    startTimer();
});

//鼠标移入
const m_hover = () => {
    display.value = true
    clearInterval(nextTimer.value);
};

//鼠标移出
const m_out = () => {
    display.value = false
    startTimer();
};

//切换图片
const next = (bool, index) => {
    if (index != null) {
        index_img.value = index;
        setTimeout(() => {
            startTimer();
        }, 100)
        return;
    }
    if (bool) {
        if (index_img.value <= 0) {
            index_img.value = img.imgList.length - 1;
        } else {
            index_img.value -= 1;
        }
        return 0;
    }
    if (index_img.value >= img.imgList.length - 1) {
        index_img.value = 0;
    } else {
        index_img.value += 1;
    }
    startTimer();
    return 0;

}

//定时器
const startTimer = () => {
    clearInterval(nextTimer.value);
    nextTimer.value = setInterval(() => {
        next(false, null)
    }, 4000)
}

//离开页面销毁定时器
onBeforeUnmount(() => {
    clearInterval(nextTimer.value)
    nextTimer.value = null;
})
</script>

<style scoped>
img {
    object-fit: cover;
}

.carousel_box {
    position: relative;
    margin: auto;
    overflow: hidden;
}

.carousel_show {
    position: relative;
    width: 100%;
    height: 52vh;
}

.carousel_content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 55vh;
}

.carousel_content :hover .carousel_box_but {
    display: flex !important;
}

.carousel_img {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    transition: all .3s;
}

ul {
    position: absolute;
    list-style: none;
    display: flex;
    align-items: center;
}

li {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #c5c0c0;
    margin: 0 3px;
    cursor: pointer;
}

.carousel_box_but {
    display: none;
    position: absolute;
    left: 0;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-top: -15px;
    border-radius: 50%;
    background: rgba(126, 120, 120, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1;
    transform: rotateZ(90deg);
    transition: all .2s;
    animation: move_l .3s ease-in 0s 1 forwards;
}

.carousel_box_but:hover {
    background: rgba(54, 50, 50, 0.8);
    cursor: pointer;
}

.carousel_box_but img {
    width: 20px;
}

.carousel_box_but img {
    width: 20px;
}

.right_but {
    left: inherit;
    right: 0;
    transform-origin: center;
    transform: rotateZ(270deg);
    animation: move_r .3s ease-in 0s 1 forwards;
}

.carousel_box_dot {
    position: absolute;
    bottom: 10%;
    right: 5%;
}

.display {
    display: flex;
}

.choose {
    background: rgba(30, 29, 29, 0.8);
    box-shadow: 0 0 6px #ffffff;
    cursor: default;
}

.imgSize {
    transform: scale(1.02);
}

@keyframes move_l {
    0% {
        transform: rotateZ(90deg) scale(0);
    }
    100% {
        transform: rotateZ(90deg) scale(1);
    }
}

@keyframes move_r {
    0% {
        transform: rotateZ(270deg) scale(0);
    }
    100% {
        transform: rotateZ(270deg) scale(1);
    }
}
</style>